Layout Animation এবং Animated API

React Native অ্যাপে layout animations এবং animated APIs ব্যবহার করে আপনি অত্যন্ত স্মুথ এবং ইন্টারঅ্যাকটিভ অ্যানিমেশন তৈরি করতে পারেন। Animated API আপনাকে বিভিন্ন ধরনের অ্যানিমেশন তৈরি করতে সাহায্য করে, যেমন ট্রান্সলেট, স্কেল, রোটেট, অপাসিটি পরিবর্তন এবং আরও অনেক কিছু। অন্যদিকে, Layout Animation আপনার অ্যাপের UI পরিবর্তন করার সময় একটি অ্যানিমেশন প্রয়োগ করতে ব্যবহৃত হয়। এই দুটি শক্তিশালী টুল আপনার অ্যাপের ব্যবহারকারীর অভিজ্ঞতা (UX) উন্নত করতে সহায়ক।

Animated API

React Native-এর Animated API আপনাকে অ্যাপের UI-তে একাধিক অ্যানিমেশন অ্যাপ্লাই করার সুযোগ দেয়। এটি React Native এর মূল অংশ এবং ব্যবহারকারীদের জন্য স্মুথ অ্যানিমেশন তৈরিতে সহায়তা করে। এই API এর মাধ্যমে আপনি UI কম্পোনেন্টের transform, opacity, scale, position ইত্যাদি পরিবর্তন করতে পারেন।

Animated API এর মূল উপাদান:

1. Animated.View, Animated.Text, Animated.Image: এই উপাদানগুলি Animated কম্পোনেন্ট হিসেবে ব্যবহৃত হয় এবং আপনাকে অ্যানিমেশন অ্যাপ্লাই করতে সহায়তা করে।
2. Animated.Value: এই ক্লাসটি একটি এনিমেটেড ভ্যালু তৈরি করে যেটি অ্যাপ্লিকেশন সাইজ, ট্রান্সলেশন, রোটেশন বা অন্যান্য অ্যানিমেশন ফিচারের জন্য ব্যবহার করা হয়।
3. Animated.timing(), Animated.spring(), Animated.decay(): এই মেথডগুলোর মাধ্যমে অ্যানিমেশন টাইমিং বা স্প্রিং এফেক্ট তৈরি করা হয়।

Animated API এর ব্যবহার উদাহরণ:

import React, { useState } from 'react';
import { View, Button, Animated } from 'react-native';

const AnimatedExample = () => {
  const [animationValue] = useState(new Animated.Value(0));

  const startAnimation = () => {
    Animated.timing(animationValue, {
      toValue: 1, // Ending value
      duration: 1000, // Duration of animation
      useNativeDriver: true, // For better performance
    }).start();
  };

  const animatedStyle = {
    opacity: animationValue,
    transform: [
      {
        scale: animationValue.interpolate({
          inputRange: [0, 1],
          outputRange: [0.5, 1], // Scale from 0.5 to 1
        }),
      },
    ],
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Animated.View style={[{ width: 100, height: 100, backgroundColor: 'blue' }, animatedStyle]} />
      <Button title="Start Animation" onPress={startAnimation} />
    </View>
  );
};

export default AnimatedExample;

এখানে, Animated.Value দিয়ে আমরা একটি অ্যানিমেটেড ভ্যালু তৈরি করেছি, এবং Animated.timing এর মাধ্যমে সেটি একটানা (0 থেকে 1) পরিবর্তিত হচ্ছে। অ্যানিমেশন স্টাইল opacity এবং scale পরিবর্তন করছে।

Animated API এর প্রধান ফিচার:

• Animated.Value: অ্যানিমেশনের মান নির্ধারণ করে এবং এটি সময়ের সাথে সাথে পরিবর্তিত হয়।
• Animated.timing(): টাইমিং অ্যানিমেশন প্রয়োগ করার জন্য ব্যবহৃত হয়।
• Animated.spring(): স্প্রিং বাউন্সি অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়।
• Animated.parallel(): একাধিক অ্যানিমেশন একসাথে চালানোর জন্য ব্যবহৃত হয়।
• Animated.sequence(): একাধিক অ্যানিমেশনকে একটি সিকোয়েন্সে চালানোর জন্য ব্যবহৃত হয়।

Layout Animation

Layout Animation React Native-এর একটি সহজ এবং শক্তিশালী API যা UI লেআউট পরিবর্তন করার সময় অ্যানিমেশন যোগ করার জন্য ব্যবহৃত হয়। এটি যখন আপনি কোনো ভিউ কম্পোনেন্টের সাইজ, পজিশন বা স্টাইল পরিবর্তন করতে চান তখন স্বয়ংক্রিয়ভাবে অ্যানিমেশন তৈরি করে।

Layout Animation সেটআপ:

React Native-এর LayoutAnimation API-এর মাধ্যমে আপনি স্বয়ংক্রিয়ভাবে layout changes-এর সাথে অ্যানিমেশন অ্যাপ্লাই করতে পারেন। এই অ্যানিমেশনটি সাধারণত View এর প্রপার্টি পরিবর্তনের সময় ব্যবহৃত হয় (যেমন: সাইজ পরিবর্তন, পজিশন পরিবর্তন ইত্যাদি)।

Layout Animation ব্যবহার করার উদাহরণ:

import React, { useState } from 'react';
import { View, Text, Button, LayoutAnimation, StyleSheet } from 'react-native';

const LayoutAnimationExample = () => {
  const [boxSize, setBoxSize] = useState(100);

  const animateBox = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring); // Spring animation preset
    setBoxSize(boxSize === 100 ? 200 : 100); // Toggle box size
  };

  return (
    <View style={styles.container}>
      <View style={[styles.box, { width: boxSize, height: boxSize }]} />
      <Button title="Animate Box" onPress={animateBox} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    backgroundColor: 'blue',
  },
});

export default LayoutAnimationExample;

এখানে LayoutAnimation.configureNext() ব্যবহার করে আমরা একটি spring animation সেট করেছি যা ভিউ কম্পোনেন্টের আকার পরিবর্তন করার সময় অ্যানিমেশন তৈরি করবে।

Layout Animation এর প্রধান ফিচার:

• LayoutAnimation.configureNext(): পরবর্তী লেআউট পরিবর্তন এর জন্য অ্যানিমেশন কনফিগার করতে ব্যবহৃত হয়।
• LayoutAnimation.Presets: এখানে বিভিন্ন ধরনের প্রিসেট অ্যানিমেশন আছে যেমন spring, easeInEaseOut, linear ইত্যাদি। আপনি আপনার প্রয়োজনে এটি নির্বাচন করতে পারেন।
• LayoutAnimation.create(): কাস্টম অ্যানিমেশন তৈরি করার জন্য ব্যবহার করা হয়।

Layout Animation ও Animated API এর মধ্যে পার্থক্য

সারাংশ

• Animated API: React Native অ্যাপে উন্নত এবং কাস্টম অ্যানিমেশন তৈরির জন্য ব্যবহৃত হয়। এটি অপাসিটি, স্কেল, রোটেশন, ট্রান্সলেট, ইত্যাদি এফেক্ট তৈরি করতে সাহায্য করে।
• Layout Animation: এটি UI লেআউট পরিবর্তনের সময় অ্যানিমেশন যোগ করার জন্য ব্যবহৃত হয় এবং React Native অ্যাপে স্বয়ংক্রিয়ভাবে অ্যানিমেশন তৈরি করে।

আপনার অ্যাপের ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এই দুটি শক্তিশালী টুল ব্যবহার করা খুবই সহায়ক এবং এটি আপনার অ্যাপের ডিজাইন এবং ইউজার ইন্টারফেসকে স্মুথ এবং আকর্ষণীয় করে তুলবে।